<template>
    <div id="morePage">
        <TopBar :searchOrNot="true"></TopBar>
        <h1>{{ search ? "关于" + $route.query.theme + "的搜索结果" : $route.query.theme }}</h1>
        <MoreListBar :listData="articleList"></MoreListBar>
        <h1 id="notFoundArticle" v-if="articleList.length == 0"></h1>
        <toTop v-show="show"></toTop>
        <NotMore></NotMore>
        <FilingBar></FilingBar>
    </div>
</template>

<script>
// 引入组件
import FilingBar from '@/components/reusable/FilingBar.vue';
import NotMore from '@/components/reusable/NotMore.vue';
import toTop from '@/components/reusable/toTop.vue'
import TopBar from '@/components/reusable/TopBar.vue'
import MoreListBar from '@/components/MoreListBar.vue'
export default {
    data() {
        return {
            // 是否按照关键词查找，需要类型转换，因为query接收来是字符串
            search: this.$route.query.search == 'true' ? true : false,
            // 文章列表
            articleList: [],
            // 分页展示数据
            page: {
                // 当前页数
                currentPage: 1,
                // 每页大小
                PageSize: 5,
            },
            // 回到顶部按钮显示/隐藏状态量
            show : false,
        }
    },
    components: {
        TopBar, MoreListBar, toTop , NotMore , FilingBar
    },
    methods: {
        // 按照主题查找更多文章
        searchMoreArticleByTheme() {
            // 获取该类主题的博客
            this.$axios({
                method: "post",
                url: "/article/getArticleByType/" + this.$route.query.theme + "/" + this.page.currentPage + "/" + this.page.PageSize
            }).then(res => {
                // 添加数据
                res.data.forEach(Element => {
                    this.articleList.push(Element)
                })
                // 为文章项添加图片路径
                this.articleList.forEach(article => {
                    article.img = this.GLOBAL.OSSImageUrlRoot + 'headerImage/' + article.id + '.png'
                })
                // 当前页数+1
                this.page.currentPage += 1
            })
        },
        // 按照关键词查找更多文章
        searchMoreArticleByKeyword() {
            this.$axios({
                method: "post",
                url: "/article/getArticleBySearch/" + this.$route.query.theme + "/" + this.page.currentPage + "/" + this.page.PageSize
            }).then(res => {
                // 添加数据
                res.data.forEach(Element => {
                    this.articleList.push(Element)
                })
                // 为文章项添加图片路径
                this.articleList.forEach(article => {
                    article.img = this.GLOBAL.OSSImageUrlRoot + 'headerImage/' + article.id + '.png'
                })
                // 当前页数+1
                this.page.currentPage += 1
            })
        },
        // 触底加载函数
        pageScroll() {
            // 获取滚动距离(当前屏幕最上方距离页面最顶部的距离)
            let scrollTop = document.documentElement.scrollTop;
            // 获取滚动高度(整个HTML高度,页面内容的高度)
            let scrollHeight = document.documentElement.scrollHeight;
            // 获取屏幕高度
            let clientHeight = document.documentElement.clientHeight;
            // 当滚动距离+屏幕高度 >= 内容高度，证明到底，加载新数据
            if (scrollTop + clientHeight >= scrollHeight) {
                // 更新数据 判断是按关键词查找还是按照主题查找
                this.search ? this.searchMoreArticleByKeyword() : this.searchMoreArticleByTheme()
            }
            // 判断是否显示回到顶部按钮
            this.toTopShow()
        },
        // 判断当前高度，是否显示回到顶部按钮
        toTopShow() {
            if (document.documentElement.scrollTop + document.body.scrollTop > 100) {
                this.show = true
            } else {
                this.show = false
            }
        }
    },
    mounted() {
        // 查找初始内容 判断是按关键词查找还是按照主题查找
        this.search ? this.searchMoreArticleByKeyword() : this.searchMoreArticleByTheme()
        // 监听页面滚动 只要滚动就出发触底加载函数 同时判断是否显示/隐藏回到顶部按钮
        window.onscroll = this.pageScroll;
    },
    beforeDestroy() {
        // 解除搜索更多文章绑定事件
        window.onscroll = null
    }
}
</script>

<style lang="scss" scoped>
h1 {
    color: $color-main-text;
    font-size: $font-size-large;
    font-weight: $font-weight-large;
    margin-left: 50px;
}

#notFoundArticle {
    text-align: center;
    margin: 0 auto;
    height: 50%;
    width: 40%;
    display: block;
    background: url('https://s1.ax1x.com/2023/04/29/p93iRRP.png') no-repeat;
    background-size: contain;
}

#toTop {
    background-color: $color-background-assistant;
    color: $color-main-text;
    font-size: $font-size-medium;
    position: fixed;
    bottom: 50px;
    right: 100px;
    height: 50px;
    width: 50px;
    border-radius: 100%;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
    z-index: 99;
}
</style>